import { Card, Typography } from "@mui/material";
import { Box } from "@mui/system";
import React, { useEffect, useState } from "react";
import useVerImg from "../query/useVerImg";
import loadingImg from "../img/loing.gif";
export default function VerPng(props) {
  const { data, isSuccess, isLoading, mutate } = useVerImg();
  const [url, setUrl] = useState();
  useEffect(() => {
    if (isSuccess) {
      props.s(data.data.data.token);
      setUrl(data.data.data.url);
    }
  }, [isSuccess]);
  useEffect(() => {
    mutate();
  }, [props.key]);

  return (
    <Box sx={{ padding: "20px", height: "100px" }}>
      {isSuccess && (
        <img
          alt="验证码加载失败，请刷新重试"
          style={{ height: "80px", cursor: "pointer" }}
          onClick={() => mutate()}
          src={url}
        ></img>
      )}

      {isLoading && (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <img style={{ height: "60px" }} src={loadingImg}></img>
          <Typography>正在加载验证码...</Typography>
        </Box>
      )}
    </Box>
  );
}
